<template>
     <div class="tools-search-view">
            <el-select v-model="searchInfo.landGroupId"
                      @change="btnQuery"
                      :clearable="true"
                      style="width:100%;" placeholder="分组">
              <el-option
                v-for="item in landGroups"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-select v-model="searchInfo.landTypeId"
                      @change="btnQuery"
                      :clearable="true"
                      style="width:100%;" placeholder="类型">
              <el-option
                v-for="item in landTypes"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-select v-model="searchInfo.landTagId"
                      @change="btnQuery"
                      :clearable="true"
                      style="width:100%;" placeholder="标签">
              <el-option 
                v-for="item in landTags"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
</template>

<script setup>
import {ref,onMounted} from "vue"
import Select from "@/components/custom/select.vue"
import {getLandGroupList, getLandTagsList, getLandList} from '@/api/plant'
import {getLandTypeList} from '@/api/gis'
import {useUserStore} from '@/pinia/modules/user'
const userStore = useUserStore()
const searchInfo = ref({landGroupId:'',landTypeId:'',landTagId:''})
const landGroups = ref([])
const landTypes = ref([])
const landTags = ref([])
const emit = defineEmits(['change'])

onMounted(() => {
  getLandGroups()
  getLandType()
  getLandTags()
})

const btnQuery= (val)=>{
    emit('change',searchInfo.value)
}
const getLandTags = () => {
  const params = {
    farmId: userStore.userInfo.farmId,
    companyId: userStore.userInfo.companyId,
    limit: 100,
  };
  getLandTagsList(params).then((res) => {
    const list = res.data.map((group) => {
      return {
        label: group.tagName,
        value: group.landTagId,
      };
    });
    landTags.value = list
  })
}
const getLandType = () => {
  const params = {
    farmId: userStore.userInfo.farmId,
    limit: 100,
  };
  getLandTypeList(params).then((res) => {
    const list = res.data.map((group) => {
      return {
        label: group.landTypeName,
        value: group.landTypeId,
      };
    });
    landTypes.value = list
  })
}
const getLandGroups = () => {
  const params = {
    farmId: userStore.userInfo.farmId,
    companyId: userStore.userInfo.companyId,
    limit: 100,
  };
  getLandGroupList(params).then((res) => {
    const list = res.data.map((group) => {
      return {
        label: group.groupName,
        value: group.landGroupId,
      };
    });
    landGroups.value = list
  })
}
</script>
<style>
.tools-search-view .el-select .el-input__inner {
  border: none;
  background: #f8f8f9;
}

.tools-search-view .el-select .el-input__inner::placeholder {
  color: #333;
}
.tools-search-view  .el-select__wrapper{
  box-shadow: none !important;
}
</style>
<style lang="scss" scoped>
    .tools-search-view {
      display: flex;
      justify-items: center;
      background-color: #f1f1f1;
      margin: 0 10px;
      border: 1px solid #dcdfe6;
      width:300px;
      height:32px;
    }
</style>